<template>
    <div class="page-container">
        <InvestmentQuery @search="query" class="investment-query" />
        <yh-card class="table-container" :style="tableContainer">
            <yh-toolbar>
                <!-- <yh-toolbar custom> -->

                <template #buttons>
                    <el-button type="primary" icon="el-icon-upload2" size="mini" @click="upload_()">导入</el-button>
                    <el-button icon="el-icon-download" size="mini" @click="export_()">导出</el-button>
                    <el-button icon="el-icon-delete" size="mini" @click="delete_()" :disabled="selection.length == 0">删除</el-button>
                    <el-button icon="el-icon-turn-off" size="mini" @click="layoutSetting()">布局设置</el-button>
                    <el-button icon="el-icon-warning-outline" size="mini" @click="operationRecord()">操作记录</el-button>
                    <el-button size="mini" @click="handleDownTemp">下载模板</el-button>
                </template>
            </yh-toolbar>
            <yh-table
                resizable
                :key="tableKey"
                show-overflow
                highlight-hover-row
                highlight-current-row
                class="table-class"
                border="none"
                ref="refTable"
                :data="pageVO.list"
                @checkbox-change="selectionChange"
                @checkbox-all="selectionChange"
            >
                <yh-table-column type="selection" width="40" fixed="left"></yh-table-column>
                <!-- <template> -->
                <yh-table-column
                    v-for="item in showFieldList"
                    :key="item.field"
                    :field="item.field"
                    :title="item.content"
                    :align="item.align"
                    :min-width="item.minWidth"
                    :width="item.width"
                    :fixed="item.fixed"
                >
                </yh-table-column>
                <!-- </template> -->
                <!-- <yh-table-column field="fundName" title="产品名称" align="center" min-width="100px"> </yh-table-column>
                <yh-table-column field="controlType" title="控制类型" align="left" min-width="100px"></yh-table-column>
                <yh-table-column field="controlGrade" title="来源" align="left" width="60px"></yh-table-column>
                <yh-table-column field="fundGpName" title="是否启用风控基金组控制" align="left" min-width="180px"> </yh-table-column>
                <yh-table-column field="assetType" title="资产类型" align="left" min-width="100px"> </yh-table-column>
                <yh-table-column field="entryName" title="风控条款内容" align="left" min-width="200px"></yh-table-column>
                <yh-table-column field="definition" title="释义" align="left" min-width="200px"> </yh-table-column>
                <yh-table-column field="remarks" title="备注" align="left" min-width="200px"> </yh-table-column>
                <yh-table-column field="hsEntryCode" title="恒生系统" align="left" width="100px"> </yh-table-column>
                <yh-table-column field="hsEntryName" title="恒生系统风险说明" min-width="200px" align="left"></yh-table-column>
                <yh-table-column field="htEntryCode" title="衡泰系统" width="100px" align="left"></yh-table-column> -->
            </yh-table>
            <yh-pagination v-bind:pageInfo="pageVO" :page-sizes="[5, 10, 20, 25, 50, 100, 300, 500]" @pageInfoChange="pageQuery"></yh-pagination>
        </yh-card>
        <InvestmentUpload ref="investmentUpload" @reload="search" />
        <OperationRecord ref="operationRecord" />
        <RiskTableLayout
            title="页面布局"
            :visible.sync="layoutDialog"
            :field-list="tableColumns"
            :selected-field-list="selectedFieldList"
            :fixed-field-list="fixedFieldList"
            :table-name="tableName"
            @on-submit="onSubmit"
        />
    </div>
</template>

<script lang="ts">
import InvestmentListController from '../controller/InvestmentListController';
export default class InvestmentList extends InvestmentListController {}
</script>

<style lang="scss" scoped>
.page-container {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: auto;
}

.investment-query {
    position: relative;
    overflow: auto;
    flex-shrink: 0;
}

.table-container /deep/ {
    flex-grow: 1;
    margin: 0px 10px 10px 10px;
    .el-card__body {
        height: 100%;
        .table-class {
            height: calc(100% - 120px);
            min-height: 120px !important;
            .table-container {
                height: 100% !important;
                .vxe-table {
                    height: 100% !important;
                    .vxe-table--main-wrapper {
                        height: 100% !important;
                        .vxe-table--body-wrapper {
                            height: calc(100% - 40px) !important;
                            min-height: 80px;
                        }
                    }
                    .vxe-table--fixed-left-wrapper,
                    .vxe-table--fixed-right-wrapper {
                        height: calc(100% - 14px) !important;
                        .vxe-table--body-wrapper {
                            height: calc(100% - 40px) !important;
                        }
                    }
                }
            }
        }
    }
}
// /deep/ .el-popover__reference-wrapper .el-input__inner {
//     cursor: pointer;
// }
/deep/ .el-popover__reference-wrapper {
    cursor: pointer;
    .el-input__inner {
        cursor: pointer;
    }
}
</style>
